<!-- 本页数据在127行 -->
<template>
    <div>
        <el-card>
            <el-page-header
                content="资料列表"
                icon=""
                title="资料管理"
            />

            <el-table
                :data="state.tableData"
                style="width: 100%"
            >
                <el-table-column
                    prop="title"
                    label="标题"
                    width="180"
                />

                <el-table-column label="分类">
                    <template #default="scope">
                        {{categoryFormat(scope.row.category)}}
                    </template>
                </el-table-column>

                <!-- <el-table-column label="是否发布">
                    <template #default="scope">
                        <el-switch
                            v-model="scope.row.isPublish"
                            :active-value="1"
                            :inactive-value="0"
                            @change="handleSwitchChange(scope.row)"
                        />
                    </template>
                </el-table-column> -->

                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button
                            circle
                            :icon="Star"
                            type="success"
                            @click="handlePreview(scope.row)"
                        ></el-button>
                        <el-button
                            circle
                            :icon="Edit"
                             @click="handleEdit(scope.row)"
                        ></el-button>

                        <el-popconfirm
                            title="你确定要删除吗?"
                            confirmButtonText="确定"
                            cancelButtonText="取消"
                            @confirm="handleDelete(scope.row)"
                        >
                            <template #reference>
                                <el-button
                                    circle
                                    :icon="Delete"
                                    type="danger"
                                ></el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <el-dialog
            v-model="dialogVisible"
            title="预览资料"
            width="50%"
        >
            <div>
                <h2>{{previewData.title}}</h2>
                <div style="font-size:12px;color:gray;">{{formatTime.getTime(previewData.editTime)}}</div>

                <el-divider>
                    <el-icon>
                        <star-filled />
                    </el-icon>
                </el-divider>

                <div
                    v-html="previewData.content"
                    class="htmlcontent"
                ></div>
            </div>
        </el-dialog>
    </div>
</template>
<script setup>
import { ref, onMounted,reactive } from "vue";
import axios from "axios";
import formatTime from "@/util/formatTime";
import { Star, Edit, Delete, StarFilled, Message } from "@element-plus/icons-vue";
import {useRouter} from 'vue-router'
import {useStore} from 'vuex'
import { useRoute } from "vue-router";
const store = useStore()
const route = useRoute()
const router = useRouter()
let state = reactive({
    tableData:[]
})
const previewData = ref({});
const dialogVisible = ref(false);
onMounted(() => {
  getTableData();
});

const getTableData = async () => {

    state.tableData = [
        {
            id:1,
            title:"ariticle1",
            content:"ariticle1",
            category:"c1",
            isPublish:false
        },
        {
            id:2,
            title:"ariticle2",
            content:"ariticle2",
            category:"c2",
            isPublish:false
        },
        {
            id:3,
            title:"ariticle3",
            content:"ariticle3",
            category:"c3",
            isPublish:false
        }
    ]

    let table = await axios.get(`/material/findByAuthor?author=${store.state.userInfo.id}`)
    state.tableData = table.data.data

};

//格式化分类信息
const categoryFormat = category => {
  const arr = ["就业", "面试", "简历"];
  return arr[category - 1];
};
//开关回调

const handleSwitchChange = async item => {
  // console.log(item)
//   await axios.put(`/adminapi/news/publish`, {
//     _id: item._id,
//     isPublish: item.isPublish
//   });

//   await getTableData();
};

//预览回调
const handlePreview = data => {
  // console.log(data)
  previewData.value = data;
  dialogVisible.value = true;
};

//删除回调
const handleDelete =async (item)=>{
    // console.log(item)
    // await axios.delete(`/adminapi/news/list/${item._id}`)
    // await getTableData()
    await axios.delete(`/material/deleteById?id=${item.id}`)

    let table = await axios.get(`/material/findByAuthor?author=${store.state.userInfo.id}`)
    state.tableData = table.data.data
}

//编辑回调
const handleEdit = (item)=>{
    //跳转到/news-manage/editnews/:id

    router.push(`/information-manage/materialEdit/${item.id}`)
}

//查看投递到简历
const handlePosts = (item)=>{

    router.push(`/information-manage/checkCvs/${item.id}`)

}
</script>
<style lang="scss" scoped>
.el-table {
  margin-top: 50px;
}

::v-deep .htmlcontent {
  img {
    max-width: 100%;
  }
}
</style>
